html
<template>
  <!-- footer -->
  <footer>
    <ul>
      <li @click="goToIndex">
        <img class="icon" :src="'src/img/hospitalicon.png'" alt="医院图标"> <!-- Added class="icon" -->
        <i class="fa fa-hospital"></i>
        <p>云医院</p>
      </li>
      <li>
        <img class="icon" :src="'src/img/store.png'" alt="商城图标"> <!-- Added class="icon" -->
        <p>商城</p>
      </li>
      <li>
        <img class="icon" :src="'src/img/find.png'" alt="发现图标"> <!-- Added class="icon" -->
        <p>发现</p>
      </li>
      <li @click="goToPersion">
        <img class="icon" :src="'src/img/my.png'" alt="我的图标"> <!-- Added class="icon" -->
        <p>我</p>
      </li>
    </ul>
  </footer>
</template>
  
  <script>
  export default {
    methods: {
      goToPersion() {
        this.$router.push('/persional');
      },
      goToIndex() {
        this.$router.push('/index');
      }
    }
  }
  </script>


<style scoped>
/*********************** footer ***********************/
footer {
  width: 100%;
  height: 14.2vw;
  box-sizing: border-box;
  border-top: solid 1px #E9E9E9;
  background-color: #FFF;

  position: fixed;
  left: 0;
  bottom: 0;
}

footer ul {
  width: 100%;
  height: 14.2vw;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

footer ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 3vw; /* Maintain consistent font size */
  color: #999;
  user-select: none;
  cursor: pointer;
}

footer ul li .fa {
  font-size: 5vw;
}

/* Adjust image size */
footer ul li .icon {
  width: 4vw; /* Adjust image width as per your design */
  height: 4vw; /* Adjust image height as per your design */
  margin-bottom: 0.5vw; /* Optional: Adjust spacing between icon and text */
}
</style>